<template>
    <h2>户型修改</h2>
    <table border="1">
        <tbody>
            <tr>
                <td>户型名称</td>
                <td>
                    <input type="text" v-model="info.name">
                </td>
            </tr>
            <tr>
                <td>户型结构</td>
                <td>
                    <select v-model="info.tId"> 
                        <option value="0">--请选择--</option>
                        <option v-for="item in Bang" :value="item.tId">{{ item.tName }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>装修标准</td>
                <td>
                    <input type="text" v-model="info.zhuangBiao">
                </td>
            </tr>
            <tr>
                <td>建筑面积</td>
                <td>
                    <input type="text" v-model="info.zongSize">
                </td>
            </tr>
            <tr>
                <td>套内面积</td>
                <td>
                    <input type="text" v-model="info.taoSize">
                </td>
            </tr>
            <tr>
                <td>户型图</td>
                <td>
                    <img :src="info.img" style="width: 100px;height: 100px;">
                    <input type="file" @change="Upload">
                </td>
            </tr>
            
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="保存" @click="Add">
                    <a href="ShowHouse">返回列表</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRouter,useRoute } from "vue-router";
const router =useRouter();
const route =useRoute();

const Fan=()=>{
    axios.get("https://localhost:7284/api/House/Fan",{
        params:{
            id:route.params.id,
        }
    })
    .then(res=>{
        info.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}

onMounted(()=>{
    Bin();
    Fan();
})

const Bang=ref([{
    "tId": 0,
    "tName": ""
}])

const Bin=()=>{
    axios.get("https://localhost:7284/api/House/GetAll")
    .then(res=>{
        Bang.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}

const info=ref({
    "id": route.params.id,
    "name": "",
    "tId": 0,
    "zhuangBiao": "",
    "zongSize": 0,
    "taoSize": 0,
    "img": "",
    "delete": 0
})

const Add=()=>{
    if(info.value.name==""){
        alert("户型名称不能为空")
        return;
    }
    if(info.value.tId==0){
        alert("户型结构不能为空")
        return;
    }
    if(info.value.zongSize==0){
        alert("建筑面积不能为空")
        return;
    }
    if(info.value.taoSize==0){
        alert("套内面积不能为空")
        return;
    }
    if(info.value.zongSize<60||info.value.zongSize>300){
        alert("建筑面积不得小于60，不得大于300")
        return;
    }
    if(info.value.taoSize>info.value.zongSize){
        alert("套内面积必须小于建筑面积")
        return;
    }
    axios.put("https://localhost:7284/api/House/Update",info.value)
    .then(res=>{
        if(res.data>0){
            alert("修改成功")
            router.push("/")
        }
        else{
            alert("修改失败")
        }
    })
    .catch(error=>{
        console.log(error);
    })
}

const Upload=(f:any)=>{
    var res = f.target.files[0]
    var fd = new FormData()
    fd.append("file",res)
    axios.post("https://localhost:7284/api/UpLoad/UpLoad",fd)
    .then(res=>{
        info.value.img=res.data
        alert("上传成功！")
    })
    .catch(error=>{
        console.log(error);
    })
}

</script>